<script setup>
import { onShow, onReachBottom } from '@dcloudio/uni-app';
import { appStore } from '@/sotre/modules/app';
import { useMessage } from 'wot-design-uni';

const message = useMessage();
const { appInfo } = toRefs(appStore());

const $get = inject('$get');
const $post = inject('$post');

const list = ref([]);
const active = ref(-1);
const i = ref(-1);
const title = ref('');
const search = reactive({
    name: '',
    mode: 'coze',
    pageNum: 1,
    pageSize: 30,
});
const total = ref(0);

uni.showLoading({
    title: '加载中...',
});

onShow(() => {
    getList();
});

onReachBottom(e => {
    if (total.value > list.value.length) {
        search.pageNum++;
        getList();
    }
});

function getList() {
    $get('/platform/record/list', search).then(res => {
        if (search.pageNum === 1) {
            list.value = res.rows;
        } else {
            list.value = list.value.concat(res.rows);
        }
        uni.hideLoading();
        total.value = res.total;
    });
}

function toChat(item) {
    if (i.value >= 0) return;
    active.value = item.id;
    appInfo.value = item;
    uni.navigateTo({
        url: `/pages/chat/chat?id=${item.id}`,
    });
}

function longpress(index) {
    i.value = index;
}

function handelTool(type, item) {
    i.value = -1;
    title.value = item.title;
    if (type === 'edit') {
        message
            .prompt({
                title: '对话名称',
                inputValue: title.value,
                inputPattern: /^(?!\s*$).+/,
            })
            .then(resp => {
                if (resp.action === 'confirm') {
                    if (resp.value === item.title) return;
                    $post('/platform/record/updateTitle', {
                        id: item.id,
                        title: resp.value,
                    }).then(res => {
                        uni.showToast({
                            title: '修改成功',
                            icon: 'success',
                        });
                        getList();
                    });
                }
            })
            .catch(error => {
                console.log(error);
            });
    } else {
        uni.showModal({
            title: '删除对话',
            content: '确定删除该对话吗？',
            success: res => {
                if (res.confirm) {
                    $post(`/platform/delRecord?id=${item.id}`).then(res => {
                        if (res.code === 200) {
                            uni.showToast({
                                title: '删除成功',
                                icon: 'success',
                            });
                            getList();
                        }
                    });
                }
            },
        });
    }
}

function searchFun(e) {
    search.name = e;
    search.pageNum = 1;
    list.value = [];
    getList();
}

function showSearch() {
    message
        .prompt({
            title: '搜索对话',
            inputValue: search.value,
            inputPattern: /^(?!\s*$).+/,
        })
        .then(res => {
            if (res.action === 'confirm') {
                if (!res.value) return;
                searchFun(res.value);
            }
        })
        .catch(e => {
            console.log(e, '222');
        });
}
</script>

<template>
    <div class="record">
        <wd-message-box></wd-message-box>
        <u-navbar title="对话" left-icon="" placeholder>
            <template #left>
                <wd-icon
                    v-if="!search.name"
                    name="search"
                    size="18px"
                    @click="showSearch"
                ></wd-icon>
                <div v-else class="search_box">
                    <span @click="showSearch">{{ search.name }}</span>
                    <div class="close" @click.stop="searchFun('')">
                        <wd-icon name="close" size="10px"></wd-icon>
                    </div>
                </div>
            </template>
        </u-navbar>
        <div class="empty" v-if="list.length === 0">
            <u-empty mode="message" text="暂无对话记录"></u-empty>
        </div>
        <div class="list">
            <div
                class="item"
                v-for="(item, index) in list"
                :key="index"
                @click="toChat(item)"
                :style="{ background: active === item.id ? '#f5f5f5' : '#fff' }"
                @longpress="longpress(index)"
                :class="{ active: index === i }"
            >
                <wd-img
                    :src="item.logo || '/static/image/fox.png'"
                    width="60px"
                    height="60px"
                    round
                    mode="aspectFill"
                >
                    <template #error>
                        <image
                            src="/static/image/fox.png"
                            style="width: 50px"
                            mode="widthFix"
                        ></image>
                    </template>
                </wd-img>
                <div class="info">
                    <div class="title">{{ item.name || '--' }}</div>
                    <div class="desc">{{ item.title || item.name }}</div>
                </div>
                <div class="tool_btn" v-if="i === index">
                    <div class="tool_item" @click.stop="handelTool('edit', item)">
                        <span>编辑对话名称</span>
                        <wd-icon name="edit-1" size="22px"></wd-icon>
                    </div>
                    <div
                        class="tool_item"
                        style="color: red"
                        @click.stop="handelTool('delete', item)"
                    >
                        <span>删除对话</span>
                        <wd-icon name="delete1" size="22px"></wd-icon>
                    </div>
                </div>
            </div>
        </div>
        <div class="mask" v-if="i >= 0" @click="i = -1" catchtouchmove="true"></div>
    </div>
</template>

<style lang="scss" scoped>
.record {
    position: relative;
    .search_box {
        position: relative;
        background: rgb(192, 192, 192);
        padding: 2px 5px;
        border-radius: 5px;
        .close {
            position: absolute;
            right: -10px;
            top: -5px;
            background: #666;
            color: #fff;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    .mask {
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 50;
        top: 0;
        left: 0;
        min-height: 100vh;
    }
    .empty {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80vh;
    }
    .list {
        padding: 10px 0px;
        display: flex;
        flex-direction: column;
        :deep(.item) {
            display: flex;
            align-items: center;
            padding: 12px 20px;
            gap: 12px;
            transition: all 0.2s ease-in-out;
            user-select: none;

            .info {
                flex: 1;
                height: 60px;
                .title {
                    font-size: 16px;
                    font-weight: bold;
                    margin-bottom: 10px;
                }
                .desc {
                    font-size: 12px;
                    color: #666;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 100%;
                }
            }
        }
        .active {
            background: #fff;
            border-radius: 15px;
            position: relative;
            z-index: 51;
            margin: 0 10px;
            .tool_btn {
                position: absolute;
                bottom: -100px;
                left: 20px;
                background: #fff;
                padding: 15px;
                border-radius: 15px;
                display: flex;
                flex-direction: column;
                gap: 12px;
                .tool_item {
                    display: flex;
                    align-items: center;
                    gap: 20px;
                    justify-content: space-between;
                }
            }
        }
    }
}
</style>
